<template>
  <div class="app-container calendar-list-container">
      <div>
        <p>点属性共计：<span style="color:#4b9dfa;">{{propNum}}</span>&nbsp;条</p>
      </div>
      <el-tabs type="card" @tab-click="handlePropClick" v-model="activeFirstTab">
        <el-tab-pane label="分类" name="1">
          <div class="btn-row">
            <el-button type="primary" @click="addFirstProp">添加分类</el-button>
          </div>
          <component :is="propList" :list="list" :isChange="isChange" :classStatus="classStatus" :listLoading="listLoading" :tab="activeFirstTab" @selectFirstProp="selectFirstProp" @updateFirstProp="updateFirstProp" @updateSecondProp="updateSecondProp" @deleteProp="deleteProp" @updateStatus="updateStatus"></component>
        </el-tab-pane>
        <el-tab-pane label="属性" name="2">
          <div class="btn-row">
            <el-button type="primary" @click="addSecondProp">添加属性</el-button>
          </div>
          <component :is="propListSecond" :list="list" :isChange="isChange" :attrStatus="attrStatus" :listLoading="listLoading" :tab="activeFirstTab" @selectAttrProp="attrFirstProp"  @selectClassProp="selectFirstProp" @updateFirstProp="updateFirstProp" @updateSecondProp="updateSecondProp" @deleteProp="deleteProp" @updateStatus="updateStatus"></component>
        </el-tab-pane>
      </el-tabs>
    <!-- <el-tabs type="border-card" @tab-click="handleClick" v-model="activeName">
      <el-tab-pane label="标准" name="1">
        <div>
          <p>点属性共计：<span style="color:#4b9dfa;">{{propNum}}</span>&nbsp;条</p>
        </div>
        <el-tabs type="card" @tab-click="handlePropClick" v-model="activeFirstTab">
          <el-tab-pane label="分类" name="1">
            <div class="btn-row">
              <el-button type="primary" @click="addFirstProp">添加分类</el-button>
            </div>
            <component :is="propList" :list="list" :classStatus="classStatus" :listLoading="listLoading" :tab="activeFirstTab" @selectFirstProp="selectFirstProp" @updateFirstProp="updateFirstProp" @updateSecondProp="updateSecondProp" @deleteProp="deleteProp" @updateStatus="updateStatus"></component>
          </el-tab-pane>
          <el-tab-pane label="属性" name="2">
            <div class="btn-row">
              <el-button type="primary" @click="addSecondProp">添加属性</el-button>
            </div>
            <component :is="propListSecond" :list="list" :attrStatus="attrStatus" :listLoading="listLoading" :tab="activeFirstTab" @selectAttrProp="attrFirstProp"  @selectClassProp="selectFirstProp" @updateFirstProp="updateFirstProp" @updateSecondProp="updateSecondProp" @deleteProp="deleteProp" @updateStatus="updateStatus"></component>
          </el-tab-pane>
        </el-tabs>
      </el-tab-pane>
      <el-tab-pane label="技能" name="2">
        <div>
          <p>点属性共计：<span style="color:#4b9dfa;">{{propNum}}</span>&nbsp;条</p>
        </div>
        <el-tabs type="card" @tab-click="handlePropClick" v-model="activeSecondTab">
          <el-tab-pane label="分类" name="1">
            <div class="btn-row">
              <el-button type="primary" @click="addFirstProp">添加分类</el-button>
            </div>
            <component :is="propList" :list="list" :classStatus="classStatus" :listLoading="listLoading" :tab="activeSecondTab" @selectFirstProp="selectFirstProp" @updateFirstProp="updateFirstProp" @updateSecondProp="updateSecondProp" @deleteProp="deleteProp" @updateStatus="updateStatus"></component>
          </el-tab-pane>
          <el-tab-pane label="属性" name="2">
            <div class="btn-row">
              <el-button type="primary" @click="addSecondProp">添加属性</el-button>
            </div>
            <component :is="propListSecond" :list="list" :attrStatus="attrStatus" :listLoading="listLoading" :tab="activeSecondTab"@selectAttrProp="attrFirstProp" @selectClassProp="selectFirstProp" @updateFirstProp="updateFirstProp" @updateSecondProp="updateSecondProp" @deleteProp="deleteProp" @updateStatus="updateStatus"></component>
          </el-tab-pane>
        </el-tabs>
      </el-tab-pane>
    </el-tabs> -->
    <div v-show="!listLoading" class="pagination-container">
      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="listQuery.page"
                     :page-sizes="[5,10,20,30, 50]" :page-size="listQuery['per-page']" layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>
    <el-dialog width="500px" :visible.sync="dialogFirstVisible" :before-close="resetFirstForm" class="dialog-style" key="first">
      <el-form :rules="rules" status-icon ref="firstTemp" :model="firstTemp" label-position="left" label-width="100px" >
        <el-form-item label="分类名称" prop="firstProp">
          <el-input v-model="firstTemp.firstProp" maxlength="10" placeholder="最多输入10个汉字"></el-input>
        </el-form-item>
        <el-form-item label="一个字描述" prop="singleDesc">
          <el-input v-model="firstTemp.singleDesc" maxlength="1" placeholder="只能输入一个汉字"></el-input>
        </el-form-item>
      </el-form>
      <div class="dialog-note">
        <p>*&nbsp;&nbsp;提交后一旦有人使用该分类不可删除和修改，请谨慎填写。</p>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitFirstProp">提交</el-button>
      </div>
    </el-dialog>
    <el-dialog width="500px" :title="dialogSecondTitle" :visible.sync="dialogSecondVisible" :before-close="resetSecondForm" class="dialog-style" key="second">
      <el-form :rules="rules" status-icon ref="secondTemp" :model="secondTemp" label-position="left" label-width="100px" >
        <el-form-item label="选择分类" prop="firstSelectProp" >
          <el-select v-model="secondTemp.firstSelectProp" placeholder="请选择">
            <el-option
              v-for="item in firstPropOptions"
              :key="item.id"
              :label="item.attr_name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="属性名称" prop="secondProp">
          <el-input v-model="secondTemp.secondProp" maxlength="10" placeholder="最多输入10个汉字"></el-input>
        </el-form-item>
      </el-form>
      <div class="dialog-note">
        <p>*&nbsp;&nbsp;提交后一旦有人使用该属性不可删除和修改，请谨慎填写。
        </p>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitSecondProp">提交</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<style scoped>
  .btn-row{
    margin-bottom:20px;
  }
  .dialog-note p{
    font-size:12px;
    color:#999;
  }
  .dialog-footer{
    text-align: center;
  }
  .dialog-footer .el-button{
    width:100px;
  }
  .dialog-style .el-select{
    width:100%;
  }
</style>
<script>
  import propList from './proplist'
  import propListSecond from './proplistSecond'
  import { getPropList, firstPropList, addFirst, addSecond, deleteProperty, updateFirst, updateSecond, statusUpdate, getPropNum } from '@/api/property'
  export default{
    data() {
      return {
        propList: propList,
        propListSecond: propListSecond,
        list: [],
        listQuery: {
          page: 1,
          'per-page': 10
        },
        classStatus: {
          selectShow: false,
          className: '分类名称▼',
          classIndex: null
        },
        attrStatus: {
          selectShow: false,
          className: '属性名称▼',
          attrShow: false,
          attrName: '归属分类▼',
          classIndex: null
        },
        total: 1,
        listLoading: true,
        activeName: '1',
        activeFirstTab: '1',
        activeSecondTab: '1',
        dialogFirstVisible: false,
        dialogSecondVisible: false,
        dialogFirstTitle: '添加分类',
        dialogSecondTitle: '添加属性',
        isChange: true,
        rules: {
          firstProp: [{ required: true, message: '分类名称不能为空', trigger: 'blur' }, { max: 10, message: '分类名称长度不能大于10个字符', trigger: 'blur' }],
          secondProp: [{ required: true, message: '属性名称不能为空', trigger: 'blur' }, { max: 10, message: '属性名称长度不能大于10个字符', trigger: 'blur' }],
          firstSelectProp: [{ required: true, message: '请选择分类', trigger: 'change' }],
          singleDesc: [{ required: true, message: '一个字描述不能为空', trigger: 'blur' }, { max: 1, message: '只能输入一个字', trigger: 'blur' }]
        },
        firstTemp: {
          firstProp: '',
          singleDesc: '',
          id: ''
        },
        secondTemp: {
          secondProp: '',
          firstSelectProp: '',
          id: ''
        },
        firstPropOptions: [],
        propNum: ''
      }
    },
    created() {
      this.getList()
    },
    methods: {
      // 获取列表
      getList() {
        this.listLoading = true
        this.getPropNum()
        if (this.activeName === '1') {
          getPropList(Object.assign({}, this.listQuery, { 'attr_type': 1, level: this.activeFirstTab })).then(response => {
            this.list = response.data.data
            this.total = response.data._meta.totalCount
            this.listLoading = false
          })
        } else if (this.activeName === '2') {
          getPropList(Object.assign({}, this.listQuery, { 'attr_type': 2, level: this.activeSecondTab })).then(response => {
            this.list = response.data.data
            this.total = response.data._meta.totalCount
            this.listLoading = false
          })
        }
      },
      // 获取属性条数
      getPropNum() {
        getPropNum(Object.assign({}, { 'attr_type': this.activeName })).then(response => {
          this.propNum = response.data.attr_num
        })
      },
      // tab切换
      handleClick() {
        this.activeFirstTab = '1'
        this.activeSecondTab = '1'
        this.listQuery.page = 1
        this.getList()
        this.classStatus = {
          selectShow: false,
          className: '分类名称▼',
          classIndex: null
        }
        this.attrStatus = {
          selectShow: false,
          className: '属性名称▼',
          attrShow: false,
          attrName: '归属分类▼',
          classIndex: null
        }
      },
      handlePropClick() {
        this.listQuery.page = 1
        this.getList()
        this.classStatus = {
          selectShow: false,
          className: '分类名称▼',
          classIndex: null
        }
        this.attrStatus = {
          selectShow: false,
          className: '属性名称▼',
          attrShow: false,
          attrName: '归属分类▼',
          classIndex: null
        }
      },
      // 添加一级属性
      addFirstProp() {
        this.dialogFirstVisible = true
        this.dialogFirstTitle = '添加分类'
        this.firstTemp.firstProp = ''
        this.firstTemp.singleDesc = ''
        this.firstTemp.id = ''
      },
      // 添加二级属性
      addSecondProp() {
        firstPropList(Object.assign({}, { 'attr_type': this.activeName })).then(response => {
          this.firstPropOptions = response.data
          this.dialogSecondTitle = '添加属性'
          this.dialogSecondVisible = true
          this.secondTemp.secondProp = ''
          this.secondTemp.firstSelectProp = ''
          this.secondTemp.id = ''
          this.$nextTick(() => {
            this.$refs.secondTemp.resetFields()
          })
        })
      },
      // 分类字母查询
      selectFirstProp(row) {
        if (row === '全') {
          if (this.activeName === '1') {
            getPropList(Object.assign({}, this.listQuery, { 'attr_type': 1, level: this.activeFirstTab })).then(response => {
              this.list = response.data.data
              this.total = response.data._meta.totalCount
              this.listLoading = false
            })
          } else if (this.activeName === '2') {
            getPropList(Object.assign({}, this.listQuery, { 'attr_type': 2, level: this.activeSecondTab })).then(response => {
              this.list = response.data.data
              this.total = response.data._meta.totalCount
              this.listLoading = false
            })
          }
        } else {
          if (this.activeName === '1') {
            getPropList(Object.assign({}, this.listQuery, { 'attr_type': 1, level: this.activeFirstTab, attr_name_az: row })).then(response => {
              this.list = response.data.data
              this.total = response.data._meta.totalCount
              this.listLoading = false
            })
          } else if (this.activeName === '2') {
            getPropList(Object.assign({}, this.listQuery, { 'attr_type': 2, level: this.activeSecondTab, attr_name_az: row })).then(response => {
              this.list = response.data.data
              this.total = response.data._meta.totalCount
              this.listLoading = false
            })
          }
        }
      },
      // 属性字母查询
      attrFirstProp(row) {
        if (row === '全') {
          if (this.activeName === '1') {
            getPropList(Object.assign({}, this.listQuery, { 'attr_type': 1, level: this.activeFirstTab })).then(response => {
              this.list = response.data.data
              this.total = response.data._meta.totalCount
              this.listLoading = false
            })
          } else if (this.activeName === '2') {
            getPropList(Object.assign({}, this.listQuery, { 'attr_type': 2, level: this.activeSecondTab })).then(response => {
              this.list = response.data.data
              this.total = response.data._meta.totalCount
              this.listLoading = false
            })
          }
        } else {
          if (this.activeName === '1') {
            getPropList(Object.assign({}, this.listQuery, { 'attr_type': 1, level: this.activeFirstTab, class_1_name_az: row })).then(response => {
              this.list = response.data.data
              this.total = response.data._meta.totalCount
              this.listLoading = false
            })
          } else if (this.activeName === '2') {
            getPropList(Object.assign({}, this.listQuery, { 'attr_type': 2, level: this.activeSecondTab, class_1_name_az: row })).then(response => {
              this.list = response.data.data
              this.total = response.data._meta.totalCount
              this.listLoading = false
            })
          }
        }
      },
      // 修改一级属性
      updateFirstProp(row) {
        this.dialogFirstVisible = true
        this.dialogFirstTitle = '修改分类'
        this.firstTemp.firstProp = row.attr_name
        this.firstTemp.singleDesc = row.attr_short_name
        this.firstTemp.id = row.id
      },
      // 修改二级属性
      updateSecondProp(row) {
        firstPropList(Object.assign({}, { 'attr_type': this.activeName })).then(response => {
          this.firstPropOptions = response.data
          this.dialogSecondTitle = '修改属性'
          this.dialogSecondVisible = true
          this.secondTemp.secondProp = row.attr_name
          this.secondTemp.firstSelectProp = row.class_1_id
          this.secondTemp.id = row.id
        })
      },
      // 关闭弹窗前先重置
      resetFirstForm() {
        this.$refs.firstTemp.resetFields()
        this.dialogFirstVisible = false
      },
      resetSecondForm() {
        this.$refs.secondTemp.resetFields()
        this.dialogSecondVisible = false
      },
      // 一级属性提交
      submitFirstProp() {
        this.$refs['firstTemp'].validate((valid) => {
          if (valid) {
            if (this.dialogFirstTitle === '添加分类') {
              addFirst(Object.assign({}, { 'attr_type': this.activeName, 'attr_name': this.firstTemp.firstProp, 'attr_short_name': this.firstTemp.singleDesc })).then(response => {
                if (response.status === 200) {
                  this.dialogFirstVisible = false
                  this.$notify({
                    title: '成功',
                    message: '添加成功',
                    type: 'success'
                  })
                  this.getList()
                }
              })
            } else if (this.dialogFirstTitle === '修改分类') {
              updateFirst(Object.assign({}, { 'attr_type': this.activeName, 'attr_name': this.firstTemp.firstProp, 'class_1_id': this.firstTemp.id, 'attr_short_name': this.firstTemp.singleDesc })).then(response => {
                if (response.status === 200) {
                  this.dialogFirstVisible = false
                  this.$notify({
                    title: '成功',
                    message: '修改成功',
                    type: 'success'
                  })
                  this.getList()
                }
              })
            }
          }
        })
      },
      // 二级属性提交
      submitSecondProp() {
        this.$refs['secondTemp'].validate((valid) => {
          if (valid) {
            if (this.dialogSecondTitle === '添加属性') {
              addSecond(Object.assign({}, { 'attr_type': this.activeName, 'attr_name': this.secondTemp.secondProp, 'class_1_id': this.secondTemp.firstSelectProp })).then(response => {
                if (response.status === 200) {
                  this.dialogSecondVisible = false
                  this.$notify({
                    title: '成功',
                    message: '添加成功',
                    type: 'success'
                  })
                  this.getList()
                }
              })
            } else if (this.dialogSecondTitle === '修改属性') {
              updateSecond(Object.assign({}, { 'attr_type': this.activeName, 'attr_name': this.secondTemp.secondProp, 'class_2_id': this.secondTemp.id, 'class_1_id': this.secondTemp.firstSelectProp })).then(response => {
                if (response.status === 200) {
                  this.dialogSecondVisible = false
                  this.$notify({
                    title: '成功',
                    message: '修改成功',
                    type: 'success'
                  })
                  this.getList()
                }
              })
            }
          }
        })
      },
      // 删除
      deleteProp(row) {
        if (this.activeName === '1') {
          this.$confirm('此操作将永久删除该分类, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            deleteProperty(Object.assign({}, { 'id': row.id, 'level': this.activeFirstTab })).then(response => {
              if (response.status === 200) {
                this.$notify({
                  title: '成功',
                  message: row.attr_name + '删除成功',
                  type: 'success'
                })
                this.getList()
              }
            })
          }).catch(() => {
          })
        } else if (this.activeName === '2') {
          this.$confirm('此操作将永久删除该分类, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            deleteProperty(Object.assign({}, { 'id': row.id, 'level': this.activeSecondTab })).then(response => {
              if (response.status === 200) {
                this.$notify({
                  title: '成功',
                  message: row.attr_name + '删除成功',
                  type: 'success'
                })
                this.getList()
              }
            })
          }).catch(() => {
          })
        }
      },
      // 停用和重启
      updateStatus(row) {
        let action = ''
        let actionText = ''
        let propFirstText = ''
        let propSecondText = ''
        if (row.action_status === '2') {
          // 停用
          action = '2'
          actionText = '停用'
        } else if (row.action_status === '3') {
          // 重启
          action = '1'
          actionText = '重启'
        }
        if (this.activeFirstTab === '1') {
          propFirstText = '分类'
        } else if (this.activeFirstTab === '2') {
          propFirstText = '属性'
        }
        if (this.activeSecondTab === '1') {
          propSecondText = '分类'
        } else if (this.activeSecondTab === '2') {
          propSecondText = '属性'
        }
        if (this.activeName === '1') {
          statusUpdate(Object.assign({}, { 'id': row.id, 'level': this.activeFirstTab, 'action': action })).then(response => {
            if (JSON.parse(response.request.response).msg !== '请先重启该属性所属分类') {
              this.isChange = true
              this.$notify({
                title: '成功',
                message: propFirstText + row.attr_name + actionText + '成功',
                type: 'success'
              })
              this.getList()
            } else if (JSON.parse(response.request.response).msg === '请先重启该属性所属分类') {
              this.isChange = false
              this.$notify({
                title: '错误',
                message: '请先重启该属性所属分类',
                type: 'success'
              })
            }
          })
        } else if (this.activeName === '2') {
          statusUpdate(Object.assign({}, { 'id': row.id, 'level': this.activeSecondTab, 'action': action })).then(response => {
            if (response.status === 200) {
              this.$notify({
                title: '成功',
                message: propSecondText + row.attr_name + actionText + '成功',
                type: 'success'
              })
              this.getList()
            } else if (response.status === 205) {
              this.$notify({
                title: '错误',
                message: '请先重启该属性所属分类',
                type: 'success'
              })
            }
          })
        }
      },
      handleSizeChange(val) {
        this.listQuery['per-page'] = val
        this.getList()
      },
      handleCurrentChange(val) {
        this.listQuery.page = val
        this.getList()
      }
    }
  }
</script>
